<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    姓名： <input type="text" class="username" /><br />
    qq号：<input type="text" class="qq" /><br />
    身份证号：<input type="text" class="id" /><br />
    手机号：<input type="text" class="phone" /><br />
    邮箱：<input type="text" class="email" /><br />
    <div class="exchange"></div>

    <button>注册</button>
    <script>
      // 1.姓名 ： 必须是中文且 2-4位；
      // 2.qq号 ： 开头 1-9 中间 0-9   5-11 的数字；
      // 3.身份证号： 总位数 18位数字  最后一位可以是X
      // 4.手机号 ： 1开头  中间的数字（3456789） 总位数是11位；
      // 5.邮箱 ： 数字字母下划线 @ 数字字符下划线 （可以是3个字符（.com），也可以是 5个字符(.com.cn)）
      var usernameEle = document.querySelector(".username");
      var qqEle = document.querySelector(".qq");
      var idEle = document.querySelector(".id");
      var phoneEle = document.querySelector(".phone");
      var emailEle = document.querySelector(".email");
      var exchangeEle = document.querySelector(".exchange");
      var btn = document.querySelector("button");

      let checkObj = {
        username: false,
        qq: false,
        phone: false,
        id: false,
        email: false,
      };

      // 用户名校验
      usernameEle.onblur = function () {
        var val = this.value;
        var reg = /^[\u4e00-\u9fa5]{2,4}$/g;
        if (reg.test(val)) {
          exchangeEle.innerHTML = "用户名符合规则";
          checkObj.username = true;
        } else {
          exchangeEle.innerHTML = "用户名不符合规则";
          checkObj.username = false;
        }
      };
      // qq号校验
      qqEle.onblur = function () {
        var val = this.value;
        var reg = /^[1-9][0-9]{4,10}$/g;
        if (reg.test(val)) {
          exchangeEle.innerHTML = "qq符合规则";
          checkObj.qq = true;
        } else {
          exchangeEle.innerHTML = "qq不符合规则";
          checkObj.qq = false;
        }
      };

      // 身份证校验
      idEle.onblur = function () {
        var val = this.value;
        var reg = /^\d{17}(\d|X)$/g;
        if (reg.test(val)) {
          exchangeEle.innerHTML = "身份证符合规则";
          checkObj.id = true;
        } else {
          exchangeEle.innerHTML = "身份证不符合规则";
          checkObj.id = false;
        }
      };

      // 手机号
      phoneEle.onblur = function () {
        var val = this.value;
        var reg = /^1[3-9]\d{9}$/g;
        if (reg.test(val)) {
          exchangeEle.innerHTML = "手机号符合规则";
          checkObj.phone = true;
        } else {
          exchangeEle.innerHTML = "手机号不符合规则";
          checkObj.phone = false;
        }
      };

      // 邮箱校验
      // 5.邮箱 ： 数字字母下划线 @ 数字字符下划线 （可以是3个字符（.com），也可以是 5个字符(.com.cn)）
      emailEle.onblur = function () {
        var val = this.value;
        // fdaf@qq.com
        var reg = /^\w+@\w+\.(([a-zA-Z]{3})|([a-zA-Z]{3}\.[a-zA-Z]{2}))$/g;
        if (reg.test(val)) {
          exchangeEle.innerHTML = "邮箱符合规则";
          checkObj.email = true;
        } else {
          exchangeEle.innerHTML = "邮箱不符合规则";
          checkObj.email = false;
        }
      };

      btn.onclick = function () {
        var res = true;

        console.log(checkObj);
        for (let key in checkObj) {
          res = res && checkObj[key];
        }
        console.log(res);
        if (res) {
          alert("可以注册，提交信息到后端");
        } else {
          alert("不能注册");
        }
      };
    </script>
  </body>
</html>
